<template>
	<u-popup v-model="popupVisible" width="600rpx" mode="center" :mask-close-able="false" border-radius="14" @close="popupClose" :zoom="false">
		<view>
			<view class="popup-title">{{ isEdit ? '编辑收货地址' : '新增收货地址' }}</view>
			<u-cell-group :border="false">
				<u-cell-item :arrow="false">
					<view class="custom-cell-label required" slot="title">收货人</view>
					<view class="custom-cell-val" slot="right-icon"><u-input v-model="receivingName" input-align="right" placeholder="请输入" :maxlength="20" trim></u-input></view>
				</u-cell-item>
				<u-cell-item :arrow="false">
					<view class="custom-cell-label required" slot="title">收货电话</view>
					<view class="custom-cell-val" slot="right-icon">
						<u-input v-model="receivingPhone" input-align="right" placeholder="请输入" :maxlength="11" type="number" trim></u-input>
					</view>
				</u-cell-item>
				<u-cell-item>
					<view class="custom-cell-label required" slot="title">省-市-区</view>
					<view class="custom-cell-val" slot="right-icon">
						<co-address-picker @change="addressPickerChange" :value="addressValue">
							<view class="region-text" :class="{ empty: !receivingLocation }">{{ receivingLocation || '请选择' }}</view>
						</co-address-picker>
					</view>
				</u-cell-item>
				<u-cell-item :arrow="false">
					<view class="custom-cell-label required" slot="title">详细地址</view>
					<view class="custom-cell-val" slot="right-icon">
						<!-- <u-input v-model="receivingAddress" input-align="right" placeholder="输入详细地址，如街道、门牌号、写字楼、小区等" :maxlength="100" type="textarea" trim fixed disable-default-padding :auto-height="false" height="84"></u-input> -->
						<textarea
							v-model="receivingAddress"
							fixed
							placeholder="输入详细地址，如街道、门牌号、写字楼、小区等"
							:maxlength="100"
							disable-default-padding
							:show-confirm-bar="false"
							class="receiving-teatarea"
						/>
					</view>
				</u-cell-item>
			</u-cell-group>
			<view class="popup-footer">
				<view class="btn-list am-flex-rc-center btn-cancel" @click="cancelHandle">取消</view>
				<view class="btn-list am-flex-rc-center btn-confirm" @click="submit">确认</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import { apiCustomerAdd, apiUpdateCustomerAddress } from '@/api/customer';
// const getParamsInit = () => {
// 	return {
// 		consigneeName: '',
// 		consigneePhone: '',
// 		consigneeProvince: '',
// 		consigneeCity: '',
// 		consigneeCounty: '',
// 		consigneeAddress: ''
// 	};
// };
export default {
	data() {
		return {
			receivingName: '',
			receivingPhone: '',
			receivingLocation: '', // 省市区文字
			receivingAddress: '',
			// cellGroupTitleSty: {
			// 	background: '#FFFFFF',
			// 	color: '#333',
			// 	fontSize: '30rpx',
			// 	fontWeight: 500
			// },
			submitLoading: false,
			popupVisible: false,
			addressCode: [],
			customerId: '',
			addressValue: [],
			addressId: '',
			isEdit: false // 是否为编辑
			// reqData: getParamsInit()
		};
	},
	methods: {
		out_open(id, itemData) {
			this.customerId = id;
			if (itemData) {
				this.isEdit = true;
				this.receivingName = itemData.consigneeName;
				this.receivingPhone = itemData.consigneePhone;
				this.receivingLocation = `${itemData.consigneeProvince}-${itemData.consigneeCity}-${itemData.consigneeCounty}`; // 省市区文字
				this.receivingAddress = itemData.consigneeAddress;

				this.addressCode = [itemData.consigneeProvinceId, itemData.consigneeCityId, itemData.consigneeCountyId];
				this.addressValue = [itemData.consigneeProvinceId, itemData.consigneeCityId, itemData.consigneeCountyId];
				this.addressId = itemData.id;
			} else {
				this.isEdit = false;
			}
			this.popupVisible = true;
		},
		// 选择省change
		regionChange(e) {
			console.log(e.detail);
			this.receivingLocation = e.detail.value.join('-');
		},
		// 点击取消
		cancelHandle() {
			this.popupVisible = false;
		},
		submit() {
			if (this.submitLoading) return;
			if (!this.receivingName) {
				this.$am_toast('请输入收货人名称');
				return;
			} else if (this.receivingPhone.length < 11) {
				this.$am_toast('收货电话格式不正确');
				return;
			} else if (!this.receivingLocation) {
				this.$am_toast('请选择省市区');
				return;
			} else if (!this.receivingAddress) {
				this.$am_toast('请输入详细地址');
				return;
			}
			this.submitLoading = true;
			let p_data = {
				clientName: this.customerName,
				clientPhone: this.customerPhone,
				consigneeName: this.receivingName,
				consigneePhone: this.receivingPhone,
				consigneeAddress: this.receivingAddress,
				consigneeProvinceId: this.addressCode[0],
				consigneeCityId: this.addressCode[1],
				consigneeCountyId: this.addressCode[2]
			};
			if (this.addressId) {
				p_data.consigneeId = this.addressId;
				apiUpdateCustomerAddress(p_data)
					.then(res => {
						let { state, msg } = res.data;
						if (state === 'OK') {
							this.popupVisible = false;
							this.$am_toast.success('编辑成功！');
							this.$emit('success');
						} else {
							this.$am_toast.warning(msg);
						}
						this.submitLoading = false;
					})
					.catch(() => {
						this.$am_toast.error('操作失败，请重新尝试！');
						this.submitLoading = false;
					});
			} else {
				p_data.id = this.customerId;
				apiCustomerAdd(p_data)
					.then(res => {
						let { state, msg } = res.data;
						if (state === 'OK') {
							this.popupVisible = false;
							this.$am_toast.success('添加成功！');
							this.$emit('success');
						} else {
							this.$am_toast.warning(msg);
						}
						this.submitLoading = false;
					})
					.catch(() => {
						this.$am_toast.error('操作失败，请重新尝试！');
						this.submitLoading = false;
					});
			}
		},
		addressPickerChange(e) {
			console.log(e);
			this.receivingLocation = e.name.join('-');
			this.addressCode = e.code;
		},
		dataInit() {
			this.receivingName = '';
			this.receivingPhone = '';
			this.receivingLocation = ''; // 省市区文字
			this.receivingAddress = '';

			this.addressCode = [];
			this.customerId = '';
			this.addressValue = [];
			this.addressId = '';
		},
		popupClose() {
			this.dataInit();
		}
	}
};
</script>

<style lang="scss" scoped>
.custom-cell-label {
	font-size: 30rpx;
	color: #666;
	&.required {
		&::after {
			content: '*';
			color: red;
		}
	}
}
.custom-cell-val {
	width: 360rpx;
	font-size: 30rpx;
	color: #333;
}
.region-text {
	height: 40rpx;
	line-height: 40rpx;
	text-align: right;
	color: #333;
	&.empty {
		color: #ccc;
	}
}
.popup-title {
	padding-top: 39rpx;
	padding-bottom: 60rpx;
	font-size: 36rpx;
	font-weight: 400;
	color: #000000;
	text-align: center;
	border-bottom: 1px solid rgba(214, 215, 217, 0.3);
}
.popup-footer {
	display: flex;
	height: 99rpx;
	// border-top: 1px solid rgba(214, 215, 217, 0.3);
	align-items: stretch;
	.btn-list {
		flex: 1;
		font-size: 36rpx;
		font-weight: 400;
		& + .btn-list {
			border-left: 1px solid rgba(214, 215, 217, 0.3);
		}
	}
	.btn-cancel {
		color: #000000;
	}
	.btn-confirm {
		color: #4bb019;
	}
}
.receiving-teatarea {
	display: block;
	height: 84rpx;
	width: 100%;
	font-size: 30rpx;
	line-height: 42rpx;
	text-align: right;
}
</style>
